<template>
	<view>
		<view class="">
			<v-tabs v-model="activeTab" bgColor="#F0F3F6" :fixed="true" :lineScale="0.2" :scroll="false" :tabs="tabs" activeFontSize="32rpx" fontSize="30rpx"  @change="getByStatus($event,true)"></v-tabs>
		</view>
		<view class="" v-if="recordList.length > 0">
			<uni-card v-for="(item,index) in recordList" :key="index">
				<view class="record" @click="activeTab != 0 && navRouter(`/pages/gird/yearlyInspection/details?inspectionId=${item.inspectionId}&types=${activeTab}`)"> 
					<view class="record-address">{{item.elevatorName}}</view>
				
					<view class="information">
						<!-- left -->
						<view class="information-left">
							<view class="record-time">
								<text>电梯类型:</text>
								<text>{{item.elevatorType == 1 ? '扶梯' : '直梯'}}</text>
							</view>
							<view class="record-time">
								<text>电梯注册码:</text>
								<text>{{item.registeredCode}}</text>
							</view>
							<view class="record-time">
								<text>年检日期:</text>
								<text>{{item.annualDate}}</text>
							</view>
						</view>
						<view class="successState" v-show="activeTab == 0" @click="startUp(index)">启动</view>
						<view class="successState Confirm" v-show="activeTab == 1" @click="Confirm(index)">确认完成</view>
					</view>
					
				</view>
			</uni-card>
		</view>
		<view v-else>
			<null-page></null-page>
		</view>
	</view>
</template>

<script>
	import polling from "@/serve/api/polling.js";
	import nullPage from '@/common/null.vue'
	
	export default {
		components:{
			nullPage
		},
		data() {
			return {
				activeTab: 0,
				tabs: ['待启动', '执行中', '已完成', ],
				
				recordList: [],//列表
				pageNum: 1,
				getListFlag: true,
			}
		},
		onLoad(e) {
			this.getByStatus(0)
		},
		methods: {
			async getByStatus(index, flag) {
				if (flag) {
					this.recordList = [];
					this.pageNum = 1;
					this.getListFlag = true;
				}
				const res = await polling.selectAnnualInspectionList({
					reviewType: Number(index),
					pageNum: this.pageNum,
					pageSize: 10,
				});
				if (res.data.data.list.length < 10) {
					this.getListFlag = false;
				}
				this.recordList.push(...res.data.data.list)
			},
			startUp(ind){
				let that = this;
				uni.showModal({
					title: '启动年检',
					content: '确定启动该年检吗？',
					success:async  function (res) {
						if (res.confirm) {
							const res = await polling.startAnnualInspection({inspectionId:that.recordList[ind].inspectionId})
							if(res){
							that.recordList.splice(ind,1)
								
							}
						} 
					}
				})
			},
			Confirm(ind){
				
				console.log(this.recordList[ind])
			}
		},
		onReachBottom(e) {
			if (this.getListFlag) {
				this.pageNum = this.pageNum + 1;
				this.getByStatus(this.activeTab);
			}
		}
	}
</script>

<style scoped>
	.uni-icons {
		color: #3AC211;
	}

	.uni-card {
		width: 670rpx;
		/* height: 280rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border: none;
		line-height: 280rpx;
		text-align: left;
	}

	.record {
		font-family: PingFang SC;
		font-weight: 400;
		/* margin: 40rpx 0; */
	}

	.record-address {
		font-size: 30rpx;
		color: #34363D;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}


	/* 左右 信息*/
	.information {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}
	.information-left{
		flex: 1 ;
	}

	.record-time {
		font-size: 24rpx;
		color: #989BA6;
		margin-top: 10rpx;
	}
	.record-time text:nth-child(1) {
		width: 30%;
		display: inline-block;
		flex-shrink: 0;
	}
	.record-time text:nth-child(2) {
		color: #34363D;
	}

	.successState {
		width: 150rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		color: #FFFFFF;
		background: #017EFE;
		box-shadow: 0px 5rpx 10rpx 0px rgba(1, 126, 254, 0.2);
		border-radius: 28rpx;
	}
	.Confirm{
		background-color: #3AC211;
	}
	

</style>
